import React, {useState, useEffect} from 'react';
import {Table, Button, Modal, Tree } from 'antd'
import axios from 'axios'
import {
    DeleteOutlined,
    AlignLeftOutlined,
    EditOutlined
  } from '@ant-design/icons';
const { confirm } = Modal
const RoleList = () => {
    const [dataSource, setdataSource] = useState([]);
    //弹出框状态
    const [isModalVisible, setIsModalVisible] = useState(false);
    //树形结构状态
    const [rightList, setrightList] = useState([]);
    //当前树状的结果
    const [currentRights, setcurrentRights] = useState([]);
    //存储点击确定时的ID
    const [currentId, setcurrentId] = useState(0);
    //请求数据
    useEffect(()=>{
        axios.get('/roles').then(res=>{
            setdataSource(res.data)
        })
    } ,[])
    useEffect(()=>{
        axios.get('/rights?_embed=children').then(res=>{
            setrightList(res.data)
        })
    } ,[])
      //table表格
      const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id)=>{
                return <b>{id}</b>
            }
        },
        {
            title: '管理员名称',
            dataIndex: 'roleName',
        },
        {
            title: '操作',
            render: (item)=>{
                return <div>
                    <Button type="primary" shape="circle"  danger icon={<DeleteOutlined />} 
                    onClick={()=>confirMothod(item)}/>
                    &nbsp;
                        {/* button */}
                    <Button type="primary" shape="circle" icon={<AlignLeftOutlined/>} 
                    onClick={()=>{showModal()
                        setcurrentRights(item.rights)
                        setcurrentId(item.id)
                        }} />
                    <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <Tree
                        checkable
                        checkedKeys={currentRights}
                        onCheck={onCheck}
                        checkStrictly={true}
                        treeData={rightList}
                        />
                    </Modal>
                </div>
            }
        },
      ];
      //弹出框回调
      const showModal = () => {
        setIsModalVisible(true);
      };
    //确定选中那一项
      const handleOk = () => {
        setIsModalVisible(false);
        setdataSource(
            dataSource.map(item=>{
                if (item.id === currentId) {
                    return {
                        ...item,
                        rights: currentRights
                    }
                }
                return item
            })
        )
        axios.patch(`/roles/${currentId}`, {
            rights: currentRights
        })

      };
    
      const handleCancel = () => {
        setIsModalVisible(false);
      };
      // 树状列表点击复选按钮后剩下的选中的
      const onCheck = (checkedKeys) => {
        setcurrentRights(checkedKeys)
      };
          //删除弹框
    const confirMothod = (item) => {
        confirm({
            title: '您确定删除吗',
            icon: <EditOutlined />,
            onOk(){
                deleteMethod(item)
            },
            onCancel(){
                console.log("Can")
            }
        })
    }
       // 确认删除
    const deleteMethod = (item) => {
        setdataSource (dataSource.filter(data=>data.id!==item.id))
        axios.delete(`/roles/${item.id}`)
    } 
    
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} rowKey={(item)=>item.id}></Table>
        </div>
    );
};

export default RoleList;